Unlisted
Edited
Oct 13, 2021
3 forks
2 stars
html`
<html>
<svg width='200', height='200', style='background-color:whitesmoke'>
<circle cx='60', cy='60', r='20', fill='blue'></circle>
</svg>
</html>
`
{
const svgContainer = d3.create('svg')
//Set width and height attributes of svg here and set background-color style to 'whitesmoke'
//Once you have the container, append a circle to it of radius 20, at position 60, 60 filled 'blue'
return svgContainer.node();
}
circle_position_data = d3.range(5).map(function() {
return {
x: Math.round(Math.random() * 4 + 1), // Random x-pixel location
y: Math.round(Math.random() * 4 + 1) // Random y-pixel location
};
})
{
// Make a local copy of the data for this cell to work with. Will reset data to circle_position_data when cell is rerun
const circle_pos_data_clone = JSON.parse(JSON.stringify(circle_position_data));
const svgContainer = d3.create('svg')
//Copy container code you set up earlier.
svgContainer. //selectAll 'circle' elements
//bind to data
//join 'circle' elements
//set 'r' attr of circles.
//set 'cx' attr of circles based on d.x
//set 'cy' attr of circles based on d.x
//set 'fill' attr of circles to blue
return svgContainer.node();
}
yScale=d3.scaleLinear().domain([0,5]).range([195,5]);
xScale=d3.scaleLinear().domain([0,5]).range([5,195]);
{
// Make a local copy of the data for this cell to work with. Will reset data to circle_position_data when cell is rerun
const circle_pos_data_clone = JSON.parse(JSON.stringify(circle_position_data));
const svgContainer = d3.create('svg')
.attr('width', 200)
.attr('height', 200)
.style('background-color', 'whitesmoke');
svgContainer.
//Copy the code you wrote earlier to create the circles
//but this time apply the xScale and yScale functions when you set
//their positions.
return svgContainer.node();
}
{
// Make a local copy of the data for this cell to work with. Will reset data to circle_position_data when cell is rerun
const circle_pos_data_clone = JSON.parse(JSON.stringify(circle_position_data));
const svgContainer = d3.create('svg')
.attr('width', 200)
.attr('height', 200)
.style('background-color', 'whitesmoke');
svgContainer.selectAll('circle')
//Copy the code you wrote earlier to create the circles
.call(d3.drag()
.subject(function(event,d) { return {x: xScale(d.x), y: yScale(d.y)}; })
.on('start',dragStarted)
.on('drag',dragged)
.on('end',dragEnded)
);
// Callback functions for the drag
function dragStarted() {
d3.select(this).attr(/* fill in */); // set stroke attr to red
}
function dragged(event, d) {
//event.x is in pixel space, d.x need to be in data spce.
d.x = /* fill in */; //Convert the event.x to data space and set d.x
d.y = /* fill in */; //Convert the event.y to data space and set d.y
d3.select(this)
.attr("cx", /* fill in */) //set the p[osition of the circle by converting d.x back to pixel space
.attr("cy", /* fill in */); //set the p[osition of the circle by converting d.y back to pixel space
}
function dragEnded() {
d3.select(this).attr(/* fill in */); //set stroke attr to null
}
return svgContainer.node();
}
{
// Make a local copy of the data for this cell to work with. Will reset data to circle_position_data when cell is rerun
const circle_pos_data_clone = JSON.parse(JSON.stringify(circle_position_data));
// Add an id to circle_position_data
circle_pos_data_clone.forEach(function(d, i) { d.id = i;});
const svgContainer = d3.create('svg')
.attr('width', 200)
.attr('height', 200)
.style('background-color', 'whitesmoke');
const circleGroups = svgContainer.selectAll('circle')
.data(circle_pos_data_clone)
.join('g') //join a <g> element here.
// create lime green circles of radius 8 and positions based on data
circleGroups.append('circle')
.attr('class', 'greenCircle')
.attr("id", function(d) { return "circle_border" + d.id; })
.attr('r', /* fill in */)
.attr('cx',/* fill in */)
.attr('cy',/* fill in */)
.attr('fill', /* fill in */);
// create blue circles of radius 5 and positions based on data
circleGroups.append('circle')
.attr('class', 'blueCircle')
.attr('r', /* fill in */)
.attr('cx',/* fill in */)
.attr('cy',/* fill in */)
.attr('fill', /* fill in */)
.call(d3.drag()
.subject(function(event,d) { return {x: xScale(d.x), y: yScale(d.y)}; })
.on('start',dragStarted)
.on('drag',dragged)
.on('end',dragEnded)
)
// Callback functions for the drag
function dragStarted(event, d) {
//*set color of outter circle stroke to red using d3.select() -- selecting on #circle_border + d.id
}
function dragged(event, d) {
//Set d.x and d.y based on event.x and event.y as before
d.x = /* fill in */;
d.y = /* fill in */;
//Update position of blue circle
d3.select(this)
.attr("cx", /* fill in */)
.attr("cy", /* fill in */);
//Update position of green circle -- select based on #circle_border + d.id
d3.select(/* fill in */)
.attr("cx", /* fill in */)
.attr("cy", /* fill in */);
}
function dragEnded(event, d) {
/* Remove color of outter circle stroke */
}
return svgContainer.node();
}
{
// Make a local copy of the data for this cell to work with. Will reset data to circle_position_data when cell is rerun
const circle_pos_data_clone = JSON.parse(JSON.stringify(circle_position_data));
// Add an id to circle_position_data
circle_pos_data_clone.forEach(function(d, i) { d.id = i;});
//Hold circle size as part of circle position data
circle_pos_data_clone.forEach(function(d, i) { d.size = 5;});
const svgContainer = d3.create('svg')
.attr('width', 200)
.attr('height', 200)
.style('background-color', 'whitesmoke');
const circleGroups = svgContainer.selectAll('circle')
.data(circle_pos_data_clone)
.join('g')
// create lime green circles of radius 8 and positions based on data
circleGroups.append('circle')
.attr('class', 'greenCircle')
//Change id so we don't select prev. border circles in drag selection
.attr("id", function(d) { return "circle_green" + d.id; })
.attr('r', /* fill in */) // Use d.size to set size attr.
.attr('cx', /* fill in */)
.attr('cy', /* fill in */)
.attr('fill', /* fill in */)
.call(d3.drag()
.subject(function(event,d) { return {x: event.x, y: event.y}; })
.on('start',resizeDragStarted)
.on('drag',resizeDragged)
.on('end',resizeDragEnded)
)
// create blue circles of radius 5 and positions based on data
circleGroups.append('circle')
.attr('class', 'blueCircle')
.attr("id", function(d) { return "circle_blue" + d.id; })
.attr('r', /* fill in */) // Use d.size to set size attr.
.attr('cx', /* fill in */)
.attr('cy', /* fill in */)
.attr('fill', /* fill in */)
.call(d3.drag()
.subject(function(event,d) { return {x: xScale(d.x), y: yScale(d.y)}; })
.on('start',dragStarted)
.on('drag',dragged)
.on('end',dragEnded)
)
//Callbacks for the resizeDrag
function resizeDragStarted(event, d) {
//Add blue stroke to outter edge of green circle
}
function resizeDragged(event, d) {
//Compute distance between event.x, event.y and d.x,d.y in pixel space.
//Then set distance as the new radius of the blue circles and set this distance + 3 as the radius
// of the green circles
const distFromCircleCenter = /* fill in */
d.size = distFromCircleCenter;
d3.select(/*select green circles*/)
.attr("r", /* fill in */);
d3.select(/*select corresponding blue circles using id attr.*/)
.attr("r", /* fill in */)
}
function resizeDragEnded(event, d) {
//Remove blue stroke from outter edge of green circle
}
// Callback functions for the movement drag
function dragStarted(event, d) {
//Add red stroke to outter edge of green circle
}
function dragged(event, d) {
// Copy code we used earlier for translating the circles
}
function dragEnded(event, d) {
//Remove red stroke from outter edge of green circle
}
return svgContainer.node();
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
